<template>
	<view class="myAuth">
		<!-- <uni-nav-bar title="添加员工" left-icon="left" @clickLeft="navBack" backgroundColor="#2CB9A4" color="#F8F8F8"></uni-nav-bar> -->
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="form1">
			<u-form-item label="员工照片" :borderBottom="true" ref="item1" labelWidth="100" labelPosition="top">
				<imgUpload code="avatar" placeholder="请上员工照片" :limit="1" @upImgs="upImgs" ref="imgUpload"
					:imageArr="images" :disable="type==1" :showdel="type!=1"></imgUpload>
			</u-form-item>
			<view class="fpjjr">
				<u-form-item label="选择岗位" labelWidth="100" @click="hideKeyboard();" ref="item1" prop="merchantpost_id">
					<vvSelect placeholder="请选择岗位" class="select pickerTop" :list="postData" label="name" valueKey="id"
						ref="vvSelect2" @change="pickerChange1" v-model="formData.merchantpost_id" :name="formData.merchantpost.name">
					</vvSelect>
					<view class="arrow">
						<u-icon name="arrow-down" color="#505050;" v-if="formData.merchantpost_id == ''" size="16">
						</u-icon>
						<u-icon name="close" color="#505050;" v-if="formData.merchantpost_id" size="16"
							@click="closeSel1">
						</u-icon>
					</view>
					<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
				</u-form-item>
			</view>
			<u-form-item label="员工姓名" prop="name" borderBottom ref="item1" labelWidth="100" :required="type!=1">
				<u--input v-model="formData.name" border="none" placeholder="请输入员工姓名" maxlength="11">
				</u--input>
			</u-form-item>
			<u-form-item label="联系电话" prop="mobile" borderBottom ref="item1" labelWidth="100" :required="type!=1">
				<u--input v-model="formData.mobile" border="none" placeholder="请输入联系电话" maxlength="11">
				</u--input>
			</u-form-item>
			<u-form-item label="密码" :prop="formData.id?'':password" borderBottom ref="item1" labelWidth="100" :required="formData.id?false:true">
				<u--input v-model="formData.password" border="none" placeholder="请输入密码">
				</u--input>
			</u-form-item>
			<!-- <u-form-item label="是否禁用" :prop="formData.id?'':password" borderBottom ref="item1" labelWidth="100" :required="formData.id?false:true">
				<u-switch v-model="value1" activeColor="#2CB9A4" size="20"></u-switch>
			</u-form-item> -->
			
		</u--form>
		<view class="botBtn">
			<view style="width: 100%;">
				<u-button class="custom-style" text="提交"
					customStyle="background: linear-gradient(90deg, #2CB9A4 0%, #C7EACE 100%);color:#fff;margin-top:20px;border-radius: 30px;"
					@click="goAuth">
				</u-button>
			</view>
		</view>
	</view>
</template>
<style>
	page {
		background-color: #fff;
	}
</style>
<script>
	import eventBUs from '../../utils/eventBus.js'
	import vvSelect from '@/components/vv-select/vv-select.vue'
	import imgUpload from '@/components/common/imgUpload.vue'
	import {
		addUser,
		updateUser,
		listPost,
		seeUser
	} from '@/request/api.js'
	export default {
		components: {
			vvSelect,
			imgUpload
		},
		data() {
			return {
				postData: [],
				formData: {
					name: "",
					avatar: '',
					id: '',
					merchantpost_id: '',
					mobile: '', //
					password: '', //
					merchantpost:{
						name:''
					}
				},
				images: [],
				rules: {
					'name': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请输入姓名',
					},
					'mobile': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'password': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请输入密码',
					},
					'merchantpost_id': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请选择岗位',
					},
					'avatar': {
						type: 'string',
						transform(value) {
							return String(value);
						},
						required: true,
						message: '请选择头像',
					},


				}
			}
		},
		created() {
			this.listPost();
		},
		onLoad(res) {
			if (res.data) {
				uni.setNavigationBarTitle({
					title:'修改员工资料'
				})
				let data = JSON.parse(res.data)
				this.seeUser(data.id)
			}
		},
		methods: {
			closeSel1() {
				this.formData.merchantpost_id = ''
				this.$refs.vvSelect2.emptCheckLabels()
			},
			async seeUser(id){
				let res = await  seeUser({id})
				this.formData = res.data
				if (this.formData.avatar) {
					this.images.push({
						url: this.formData.avatar
					})
				}
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			async listPost() {
				let res = await listPost()
				this.postData = res.data.data
				console.log(this.postData, 'postData')
			},
			pickerChange1(e, name) {
				this.formData.merchantpost_id = e.toString()
				this.$refs.form1.validateField('merchantpost_id')
			},
			showPop() {
				this.$refs.timePop.show();
			},
			timeChange(val) {
				console.log(val, 232323);
				this.formData.start_time = val[0] + ':00'
				this.formData.end_time = val[1] + ':00'
				this.$refs.form1.validateField('start_time')
			},
			changeComStatus(e) {
				this.empt()
				if (e == '商品') {
					this.formData.type_data = 0
				} else {
					this.formData.type_data = 1
				}
				this.$refs.form1.setRules(this.rules)
				// this.empt()
			},
			empt() {
				this.$refs.imgUpload.empt()
				for (let k in this.formData) {
					this.formData[k] = ''
				}
			},
			upImgs(e) {
				let arr = e.images
				this.formData.avatar = arr.join(',') //
				this.$refs.form1.validateField('avatar')
				console.log(e, this.formData.avatar, 'images');
			},
			pickerChange(e, name) {
				// console.log(e,name)
				this.formData.ibec_id = e.toString()
				this.$refs.form1.validateField('ibec_id')
			},
			async getUser() {
				let res = await getStaff()
				this.formData.name = res.data.ibec.name
				this.formData.ibec_id = res.data.ibec.id
				this.formData.mobile = res.data.mobile
				uni.setStorageSync('userInfo', res.data)
				this.$eventBus.$emit('hasLogin', true);
			},
			select(e) {
				this.formData.name = e.name
				this.formData.ibec_id = e.id
				this.$refs.form1.validateField('ibec_id')
			},
			goAuth() {
				this.$refs.form1.validate().then(res => {
					this.formData.avatar = this.formData.avatar.toString()
					if (this.formData.id) {
						this.updateUser()
						return
					}
					addUser(this.formData).then(res => {
						if (res.code == 200) {
							uni.navigateTo({
								url: '/my_pages/components/success?title=添加成功'
							})
							this.empt()
						}
					})
				}).catch(errors => {
					uni.$u.toast('请正确填写信息')
				})
			},
			async updateUser() {
				delete this.formData.merchantpost;
				let res = await updateUser(this.formData)
				uni.navigateTo({
					url: '/my_pages/components/success?title=修改成功'
				})
				this.empt()
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item__body__right {
		margin-top: 25rpx !important;
	}

	.arrow {
		width: 20rpx;
		height: 20rpx;
		margin-right: 8rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.pickerTop {
		flex: 1;
	}

	::v-deep .u-radio {
		margin-right: 13rpx;
	}

	::v-deep .u-form-item__body__right__content__slot {
		z-index: 100 !important;
		flex-direction: row !important;
	}

	::v-deep .u-textarea__count {
		background-color: transparent !important;
	}

	::v-deep .u-textarea {
		background-color: transparent !important;
		color: #505050;
	}

	::v-deep .vv-input__control {
		color: #505050;
		font-size: 30rpx !important;
	}

	.popupShow {
		overflow: hidden;
		position: fixed;
		z-index: 999999999999;
	}

	::v-deep .u-transition {
		overflow: scroll;
		max-height: 70vh;
	}

	::v-deep .u-radio__text {
		font-size: 30rpx !important;
		color: #505050;
	}

	::v-deep .u-radio-group--row {
		z-index: 10;
		color: #505050;
	}

	::v-deep .u-input {
		background-color: transparent !important;
	}

	::v-deep .u-form-item__body__left__content__label {
		font-size: 30rpx !important;
		color: #979797 !important;
	}

	::v-deep .u-input__content__field-wrapper__field {
		font-size: 30rpx !important;
		color: #505050;
	}

	::v-deep .u-textarea__field {
		font-size: 30rpx !important;
		color: #505050;
	}

	.comTab {
		display: flex;
	}

	.myAuth {
		padding: 30rpx;
	}

	::v-deep .u-input {
		background-color: #fff !important;
	}

	::v-deep .u-transition {
		overflow: scroll !important;
		height: 50vh !important;
	}

	.compony {
		display: flex;
		padding-top: 6px;
		padding-left: 9px;
		padding-right: 9px;
		height: 24px;
		border-radius: 4px;
		justify-content: space-between;

		.select {
			flex: 1;
		}
	}

	.botBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		/* width: 100%; */
		right: 0;
		padding: 20rpx;
		left: 0;
		bottom: 60rpx;
	}

	.custom-style {
		width: 48% !important;
	}
</style>